<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
        <!-- 引用面包屑导航组件 -->
      <breadcrumb>个人设置</breadcrumb>
    </div>
    <el-row>
      <el-col :span="14">
        <el-form  :model="form" :rules="rules" label-width="120px">
          <el-form-item label="编号:">
            {{form.id}}
          </el-form-item>
          <el-form-item label="手机:">
            {{form.mobile}}
          </el-form-item>
          <el-form-item label="媒体名称:" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="媒体简介:" prop="intro">
            <el-input type="textarea" v-model="form.intro"></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱:" prop="email">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="hSave">保存设置</el-button>
          </el-form-item>
       </el-form>
      </el-col>
      <el-col :span="10">
        <el-upload
        class="avatar-uploader"
        :http-request="uploadPhoto"
        action=""
        name="image"
        :show-file-list="false">
        <!-- img用来显示上传成功之后的图像 -->
        <el-image v-if="form.photo" :src="form.photo" class="avatar"/>
        <!-- 显示引导用户上传的 那个 + 号 -->
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
// 页面刷新获取数据，实现数据回填
export default {
  data () {
    return {
      imageUrl: '',
      form: {
        id: '',
        mobile: '',
        name: '',
        intro: '',
        email: '',
        photo: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入媒体名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在5到30之间', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入媒体简介', trigger: 'blur' },
          { min: 5, max: 5000, message: '最少10个字', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.doUserInfor()
  },
  methods: {
    // 1.发送请求获取个人信息
    async doUserInfor () {
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/user/profile'
      })
      console.log('用户个人信息', res)
      // 2.进行表单数据回填
      this.form.id = res.data.data.id
      this.form.mobile = res.data.data.mobile
      this.form.name = res.data.data.name
      this.form.intro = res.data.data.intro
      this.form.email = res.data.data.email
      this.form.photo = res.data.data.photo
    },
    // 点击提交按钮，保存个人信息
    async hSave () {
      try {
        const res = await this.$http({
          method: 'PATCH',
          url: '/mp/v1_0/user/profile',
          data: {
            name: this.form.name,
            intro: this.form.intro,
            email: this.form.email
          }
        })
        // 1.成功后进行消息提示
        this.$message.success('个人信息更改成功')
        // console.log('修改后的个人信息', res)
        const name = res.data.data.name
        // 2.此时发布事件
        this.$eventBus.$emit('updateInfor', { name })
      } catch (err) {
        this.$message.error('个人信息更改失败')
      }
    },
    // 更改头像
    async uploadPhoto (obj) {
      // console.log('obj', obj)
      const { file } = obj
      // 1.获取formData格式的参数
      const fd = new FormData()
      fd.append('photo', file)
      try {
        // 2.发送请求
        const res = await this.$http({
          method: 'PATCH',
          url: '/mp/v1_0/user/photo',
          data: fd
        })
        // 3.设置头像地址
        this.form.photo = res.data.data.photo
        // 4.成功消息提示
        this.$message.success('更新成功')
        // 5.此时发布事件
        const photo = res.data.data.photo
        this.$eventBus.$emit('updatePhoto', { photo })
      } catch (err) {
        this.$message.error('更新失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader {
    text-align: center;
  }
  .avatar{
    width: 200px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
